<template>
    <nav class="xFedit-nav">
        <div class="nav-title">
            <div v-if="isEdit">
                <div class="title-item">节目名称</div>
                <div class="title-info">
                    <el-input size="mini" v-model="formData.programName" @change="ajaxEditChange"></el-input>
                </div>
                <div class="title-item">分辨率</div>
                <div class="title-info">
                    <el-select @change="ajaxEditChange" size="mini" v-model="formData.selectVal" style="font-size: 12px;">
                        <el-option v-for="item in selectBox" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="title-item"><i style="cursor: pointer;" class="iconfont icon-edit" @click="ajaxEditSubmit"></i></div>
            </div>
            <div v-else>
                <div class="title-item">节目名称</div>
                <div class="title-item">{{ formData.programName }}</div>
                <div class="title-item"><i style="cursor: pointer;" class="iconfont icon-edit" @click="ajaxEdit"></i></div>
            </div>
        </div>
        <div>
            <div class="control-warpper"><control-bar /></div>
        </div>
    </nav>
</template>

<script>
import MainNavBar from './main-navbar';
import ControlBar from '@/components/program-editor/control-bar';
import EditItem from '@/components/edit-item';
import { mapState, mapMutations } from 'vuex';
export default {
    extends: MainNavBar,
    components: {
        ControlBar,
        EditItem
    },
    data() {
        return {
            formData: {
                programName: '',
                selectVal: ''
            },
            isEdit: false,
            selectBox: [
                {
                    value: 0,
                    label: '自定义分辨率'
                },
                {
                    value: '1920*1080',
                    label: '1920*1080',
                    width: 1920,
                    height: 1080
                },
                {
                    value: '1280*800',
                    label: '1280*800',
                    width: 1280,
                    height: 800
                },
                {
                    value: '1280*752',
                    label: '1280*752',
                    width: 1280,
                    height: 752
                },
                {
                    value: '1440*900',
                    label: '1440*900',
                    width: 1440,
                    height: 900
                },
                {
                    value: '1024*768',
                    label: '1024*768',
                    width: 1024,
                    height: 768
                },
                {
                    value: '1080*1920',
                    label: '1080*1920',
                    width: 1080,
                    height: 1920
                }
            ]
        };
    },
    computed: {
        ...mapState('programs', ['pageData'])
    },
    watch: {
        pageData: {
            deep: true,
            immediate: true,
            handler(v1) {
                this.formData = {
                    programName: v1.programName,
                    selectVal: v1.width + '*' + v1.height
                };
            }
        }
    },
    methods: {
        ...mapMutations('programs', ['updatePageData']),
        ajaxEdit() {
            this.isEdit = true;
        },
        ajaxEditChange() {
            let fenbianlv = this.formData.selectVal.split('*');
            console.log(fenbianlv);
            this.updatePageData({
                programName: this.formData.programName,
                width: parseInt(fenbianlv[0]),
                height: parseInt(fenbianlv[1])
            });
        },
        ajaxEditSubmit() {
            let fenbianlv = this.formData.selectVal.split('*');
            this.updatePageData({
                programName: this.formData.programName,
                width: parseInt(fenbianlv[0]),
                height: parseInt(fenbianlv[1])
            });
            this.isEdit = false;
        }
    }
};
</script>
